<template>
	<view class="list">
		<view class="list-card">
			<view class="item"
				v-for="({activityName,rewardContent,distributeRewardsExpireTime,state,id,imgUrl,specsFlag},i)  in list"
				:key="i" v-if="list.length>0">
				<view>
					<image v-if="imgUrl" :src="`https://images.linglinggong.net/${imgUrl}`" mode=""></image>
					<image v-else src="../../static/SendCode/1.png" mode=""></image>
					<view class="">
						<text>{{activityName}}</text>
						<view class="">
							<text>{{rewardContent}}</text>
							<view :class="['btn',state==0?'active1':'active2']"
								@click="state==0&&toAddress(id,specsFlag)">
								{{ (state==0&&'未领取')|| (state==1&&'已领取')||(state==2&&'已过期')}}
							</view>
						</view>
					</view>
				</view>
				<view class="">
				</view>
				<view class=""> 请于 {{distributeRewardsExpireTime.toString().substring(0,11)}} 前领取，未领取的将视为主动放弃 </view>
			</view>
			<view class="empit" v-else>
			</view>
			<uni-load-more :status="hasMore ? 'loading' : 'noMore'"></uni-load-more>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				obj: {
					pageNum: 1,
					pageSize: 10
				},
				total: 0,
				hasMore: true, // 是否加载
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			// 列表
			getList() {
				if (!this.hasMore) return // 说明已经没有更多啦
				this.$fetch(this.$api.reward_list, {
					...this.obj
				}, 'POST').then(res => {
					let {
						code,
						rows,
						msg,
						total
					} = res
					if (code) return uni.showToast({
						title: msg,
						icon: 'none'
					})
					this.list = [...this.list, ...rows]
					this.hasMore = this.list.length < total
				})
			},
			toAddress(id, specsFlag) {
				let obj = {
					id,
					specsFlag
				}
				uni.navigateTo({
					url: `/pages/sendCode/addrss?obj=${JSON.stringify(obj)}`
				})
			}
		},
		onReachBottom() {
			this.obj.pageNum += 1
			this.getList()
		},
		onPullDownRefresh() {
			this.obj.pageNum = 1
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>
<style lang="scss" scoped>
	.list {
		&-card {
			margin-top: 40rpx;

			.item {
				width: 694rpx;
				height: 266rpx;
				background: #FFF;
				border-radius: 20rpx;
				opacity: 1;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;

				&>view:first-child {
					display: flex;
					margin: 30rpx 36rpx 0 20rpx;

					image {
						width: 160rpx;
						height: 160rpx;
						flex-shrink: 0;
					}

					&>view:last-child {
						display: flex;
						flex-direction: column;
						margin-left: 30rpx;
						width: 600rpx;

						&>text {
							font-size: 32rpx;
							font-weight: bold;
							color: #262626;
							margin-bottom: 6rpx;
						}

						&>view {
							display: flex;
							height: 62rpx;
							align-items: center;

							&>text {
								font-size: 24rpx;
								font-weight: 400;
								color: #262626;
								overflow: hidden;
							}

							.btn {
								width: 162rpx;
								height: 62rpx;
								border-radius: 12rpx;
								opacity: 1;
								display: flex;
								justify-content: center;
								align-items: center;
								font-weight: 448rpx;
								margin-left: auto;
							}

							.active1 {
								background: #FCC928;
								box-shadow: 2rpx 8rpx 20rpx 2rpx rgba(252, 201, 40, 0.4);
								font-size: 32rpx;
								color: #262626;
							}

							.active2 {
								background: #AAAAAA;
								font-size: 32rpx;
								color: #FFFFFF;
							}
						}
					}
				}

				&>view:nth-child(2) {
					width: 638rpx;
					height: 2rpx;
					background: #F1F1F5;
					margin: 10rpx auto;
				}

				&>view:last-child {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF3F20;
					width: 638rpx;
					margin: 0 auto;
				}
			}
		}
	}

	.empit {
		width: 414rpx;
		height: 280rpx;
		background: url('../../static/icon3/grow/empit.png') center center/cover no-repeat;
		margin: 496rpx auto;
	}
</style>